<template>
	<view class="">
		<!-- 聊天列表 -->
		<scroll-view scroll-y="true" style="position: absolute;top: 0;left: 0;right: 0;bottom: 101rpx;"
		:scroll-into-view="scrollInto" scroll-with-animation>
			<block v-for="(item,index) in chatList" :key='index'>
				<view :id="'chat' + index">
					<userChatList :item="item" :index="index"
					:preTime="index > 0 ? chatList[index-1].created_time : 0"></userChatList>
				</view>
			</block>
		</scroll-view>
		<!-- 底部输入行 -->
		<bottomInput @submit='submit'></bottomInput>
	</view>
</template>

<script>
	import userChatList from '@/components/user-chat/user-chat-list.vue';
	import bottomInput from '@/components/common/bottom-input.vue'
	export default {
		components:{userChatList,bottomInput},
		data() {
			return {
				scrollH: 0,
				chatList:[{
					user_id: 2,
					avatar: '/static/common/nothing.png',
					username: '对方',
					data: '你好啊！！！',
					type: 'text',
					created_time: 1638881322
				},{
					user_id: 1,
					avatar: '/static/default.jpg',
					username: '本人',
					data: '你好',
					type: 'text',
					created_time: 1639224651
				},{
					user_id: 2,
					avatar: '/static/common/nothing.png',
					username: '对方',
					data: '你好啊！！！',
					type: 'text',
					created_time: 1638881322
				},{
					user_id: 1,
					avatar: '/static/default.jpg',
					username: '本人',
					data: '你好',
					type: 'text',
					created_time: 1639224651
				},{
					user_id: 2,
					avatar: '/static/common/nothing.png',
					username: '对方',
					data: '你好啊！！！',
					type: 'text',
					created_time: 1638881322
				},{
					user_id: 1,
					avatar: '/static/default.jpg',
					username: '本人',
					data: '你好',
					type: 'text',
					created_time: 1639224651
				},{
					user_id: 2,
					avatar: '/static/common/nothing.png',
					username: '对方',
					data: '你好啊！！！',
					type: 'text',
					created_time: 1638881322
				},{
					user_id: 1,
					avatar: '/static/default.jpg',
					username: '本人',
					data: '你好',
					type: 'text',
					created_time: 1639224651
				},{
					user_id: 2,
					avatar: '/static/common/nothing.png',
					username: '对方',
					data: '你好啊！！！',
					type: 'text',
					created_time: 1638881322
				}],
				scrollInto: ''
			}
		},
		// 页面加载完成的时候
		onReady() {
			this.pageDown()
		},
		onLoad() {
			uni.getSystemInfo({
				success: (e) => {
					this.scrollH = e.windowHeight - uni.upx2px(101)
				}
			})
		},
		methods:{
			submit(data) {
				let obj = {
					user_id: 1,
					avatar: '/static/default.jpg',
					username: '本人',
					data: data,
					type: 'text',
					created_time: (new Date()).getTime()
				}
				this.chatList.push(obj)
				this.pageDown()
			},
			// 滚动到底部的函数
			pageDown() {
				// 聊天内容的最后一个id
				let lastIndex = this.chatList.length - 1
				if (lastIndex < 0) return
				this.scrollInto = 'chat' + lastIndex
			}
		}
	}
</script>

<style>
</style>
